import React from "react";
import { UploadFile } from "./upload";
import { Icon } from "../Icon/icon";
import Progress from "../Progress";
import {
  faFileAlt,
  faSpinner,
  faTimesCircle,
  faTimes,
} from "@fortawesome/free-solid-svg-icons";
import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";

/**
 * UploadList 组件属性接口
 */
interface UploadListProps {
  /** 文件列表 */
  fileList: UploadFile[];
  /** 文件移除回调函数 */
  onRemove: (file: UploadFile) => void;
}

/**
 * UploadList 文件列表组件
 *
 * 显示上传文件的列表，包括文件名、状态、进度和操作按钮
 *
 * @param props - UploadList 组件属性
 * @returns 渲染的文件列表
 */
export const UploadList: React.FC<UploadListProps> = (props) => {
  const { fileList, onRemove } = props;

  return (
    <ul className="viking-upload-list">
      {fileList.map((item) => {
        return (
          <li className="viking-upload-list-item" key={item.uid}>
            <span className={`file-name file-name-${item.status}`}>
              <Icon icon={faFileAlt} />
              {item.name}
            </span>
            <span className="file-status">
              {(item.status === "uploading" || item.status === "ready") && (
                <Icon icon={faSpinner} spin />
              )}
              {item.status === "success" && <Icon icon={faCheckCircle} />}
              {item.status === "error" && <Icon icon={faTimesCircle} />}
            </span>
            <span className="file-actions">
              <Icon
                icon={faTimes}
                onClick={() => {
                  onRemove(item);
                }}
              />
            </span>
            {item.status === "uploading" && (
              <Progress percent={item.percent || 0} />
            )}
          </li>
        );
      })}
    </ul>
  );
};

export default UploadList;
